<template>
	<div class="title">
		<div style="height: 15%">
			<img alt="" src="/images/top_bg.png" style="width: 100%;position: relative;">
			<div class="title_top">安心北宅 - 智慧应急平台</div>
			<div class="title_top_data">{{ nowDate + ' ' }}{{ nowTime }}</div>
			<div class="title_top_mon">{{ weekday }}</div>
			<div class="title_top_date">平台运行{{ basicData.continueday }}天</div>
			<div class="title_top_tq">{{ basicData.tianqi }}</div>
		</div>
		<div style="display: flex;color: white;width: 100%;height: 85%">
			<!--      左侧三个 基础数据 企业分类 隐患排查-->
			<div style="width: 23%;margin-left: 2%">
				<!--        基础数据-->
				<div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'25%'}" class="basic_data">
					<div class="top_left_title">基础数据</div>
					<div style="display: flex;padding-top: 4%">
						<div style="width: 30%;margin-left:4%;text-align: center">
							<div class="tot_left_data">{{ basedata.qiye ? basedata.qiye : 0 }}</div>
							<img alt="" class="top_left_img" src="/images/gongju.png">
							<div class="tot_left_name">企业数</div>
						</div>
						<div style="width: 30%;text-align: center">
							<div class="tot_left_data">{{ basedata.jiuxiao ? basedata.jiuxiao : 0 }}</div>
							<img alt="" class="top_left_img" src="/images/jiuxiao.png">
							<div class="tot_left_name">九小场所数</div>
						</div>
						<div style="width: 30%;text-align: center">
							<div class="tot_left_data">{{ basedata.zhuhu ? basedata.zhuhu : 0 }}</div>
							<img alt="" class="top_left_img" src="/images/zhuhu.png">
							<div class="tot_left_name">住户数</div>
						</div>
					</div>
				</div>
				<!--        企业分类-->
				<div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'35%',marginTop:'3%'}" class="basic_data">
					<div class="center_left_title">企业分类</div>
					<div id="EnterpriseClassification" style="width:100%;height:100%;margin-top: -3%"></div>
				</div>
				<!--        隐患排查-->
				<div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'33%',marginTop:'3%'}" class="basic_data">
					<div class="center_left_title">隐患排查</div>
					<div style="display: flex;height: 90%;margin-top: 2%">
						<div style="width: 30%;text-align: center;margin-left: 4%">
							<div class="bottom_left_num">{{ yinhuan.yinhuan_1 ? yinhuan.yinhuan_1 : 0 }}</div>
							<div class="bottom_left_text">整改数</div>
							<div style="font-size: 70px;margin-top: -40%;color: #65FFFE">.</div>
						</div>
						<div :style="{backgroundImage:'url('+bg2+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}" style="width: 5vw;text-align: center;height: 5vw;margin: 2% 0 0 3%">
							<div style="margin-top: 32%;font-size: 14px">{{ yinhuan.percent ? yinhuan.percent : 0 }}
							</div>
							<div style="color: #7CC1FF;font-size: 15px">整改率</div>
						</div>
						<div style="width: 30%;text-align: center">
							<div class="bottom_left_num">{{ yinhuan.yinhuan_0 ? yinhuan.yinhuan_0 : 0 }}</div>
							<div class="bottom_left_text">未整改数</div>
							<div style="font-size: 70px;margin-top: -40%;color: #0870FEFF">.</div>
						</div>
					</div>
					<div style="display: flex;margin-top: -23%;text-align: left;justify-content: space-around">
						<div style="background-color: #152469FF;margin-top:3%">
							<div class="bottom_left_border">
								<div class="bottom_left_border_text">监管单位数</div>
								<div class="bottom_left_border_num">{{ yinhuan.all ? yinhuan.all : 0 }}</div>
							</div>
						</div>
						<div style="background-color: #152469FF;margin-top:3%">
							<div class="bottom_left_border">
								<div class="bottom_left_border_text">检查单位数</div>
								<div class="bottom_left_border_num">{{ yinhuan.check ? yinhuan.check : 0 }}</div>
							</div>
						</div>
						<div style="background-color: #152469FF;margin-top:3%">
							<div class="bottom_left_border">
								<div class="bottom_left_border_text">查出隐患数</div>
								<div class="bottom_left_border_num">{{ yinhuan.yinhuan_all ? yinhuan.yinhuan_all : 0 }}
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<!--中间2个 地图  各社区基础数据-->
			<div style="width: 46%;margin-left: 2%">
				<!--地图-->
				<div
					style="width: 9%;position: absolute;background: #393734FF;z-index:9999999;opacity:0.7;margin-left: 37%">
					<div style="padding: 5% 0 5% 10%;">
						<div class="top_map_left">
							<div style="width: 30%">绿色</div>
							<div>：放心单位</div>
						</div>
						<div class="top_map_left">
							<div style="width: 30%">红色</div>
							<div>：关注单位</div>
						</div>
						<div class="top_map_left">
							<div style="width: 30%">深红色</div>
							<div>：重点关注单位</div>
						</div>
						<div class="top_map_left">
							<div style="width: 30%">圆形</div>
							<div>：企业</div>
						</div>
						<div class="top_map_left">
							<div style="width: 30%">三角形</div>
							<div>：九小企业</div>
						</div>
						<div class="top_map_left">
							<div style="width: 30%">星形</div>
							<div>：住户</div>
						</div>
					</div>
				</div>
				<div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'53%'}" class="basic_data">
					<div id="amapcontainer" style="height: 100%"></div>
				</div>

				<!--        各社区基础数据-->
				<div :style="{backgroundImage:'url('+bg1+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'43%',marginTop:'2%'}" class="basic_data">
					<div class="bottom_center_title">各社区基础数据</div>
					<div id="main" style="width:100%;height:75%;padding-top: 3%"></div>
				</div>
			</div>
			<!--右侧3个 需求数据 居家安全 应急物资-->
			<div style="width: 23%;margin-left: 2%">
				<!--        需求数据-->
				<div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'25%'}" class="basic_data">
					<div class="top_left_title">需求数据</div>
					<div style="display: flex;padding-top: 4%">
						<div style="width: 30%;margin-left:4%;text-align: center">
							<div class="tot_left_data">{{ basicData.all }}</div>
							<img alt="" class="top_left_img" src="/images/demand_re.png">
							<div class="tot_left_name">需求上报数</div>
						</div>
						<div style="width: 30%;text-align: center">
							<div class="tot_left_data">{{ basicData.reply }}</div>
							<img alt="" class="top_left_img" src="/images/demand_reply.png">
							<div class="tot_left_name">需求回复数</div>
						</div>
						<div style="width: 30%;text-align: center">
							<div class="tot_left_data">{{ basicData.unreply }}</div>
							<img alt="" class="top_left_img" src="/images/demand_noreply.png">
							<div class="tot_left_name">需求未回复数</div>
						</div>
					</div>
				</div>
				<!--        居家安全-->
				<div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'35%',marginTop:'3%'}" class="basic_data">
					<div class="center_left_title">居家安全</div>
					<div id="homesafe" style="width:100%;height:75%;"></div>
					<div style="display: flex;justify-content: space-around">
						<div style="display: flex">
							<div class="homesafe_bottom">煤取暖总户数：</div>
							<div class="homesafe_bottom_data">{{ safeDataBottom[0] }}</div>
						</div>
						<div style="display: flex">
							<div class="homesafe_bottom">空气能取暖总户数：</div>
							<div class="homesafe_bottom_data">{{ safeDataBottom[1] }}</div>
						</div>
						<div style="display: flex">
							<div class="homesafe_bottom">报警器缺数总数：</div>
							<div class="homesafe_bottom_data">{{ safeDataBottom[2] }}</div>
						</div>
					</div>
				</div>
				<!--        应急物资-->
				<div :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',height:'33%',marginTop:'3%'}" class="basic_data">
					<div class="center_left_title">应急物资</div>
					<div style="width: 100%;height: 100%;display: flex">
						<div style="width: 50%;height: 100%">
							<div :style="{backgroundImage:'url('+bg3+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}" style="width: 5.5vw;text-align: center;height: 6vw;margin: 20% 0 0 20%">
								<div class="bottom_right_text">{{ emUziData.kucun ? emUziData.kucun : 0 }}
								</div>
								<div style="font-size: 12px;scale: 0.8;">库存数
								</div>
							</div>
							<div class="bottom_right_num">
								<div class="bottom_right_num_text">入库数：</div>
								<div>{{ emUziData.in ? emUziData.in : 0 }}</div>
								<div class="bottom_right_num_text">出库数：</div>
								<div>{{ emUziData.out ? emUziData.out : 0 }}</div>
							</div>
						</div>
						<div style="width:50%;height: 90%">
							<div :style="{backgroundImage:'url('+bg4+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}"
								style="height: 19%;width: 90%;display: flex;justify-content: space-around;margin-top:12%">
								<div
									:class="['bottom_right_img_text']">
									{{
                    emUziData.list[0].name ? emUziData.list[0].name : ''
                  }}
								</div>
								<div class="bottom_right_img_num">{{
                    emUziData.list[0].warehouse ? emUziData.list[0].warehouse : '0'
                  }}
								</div>
							</div>
							<div :style="{backgroundImage:'url('+bg4+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}"
								style="height: 19%;width: 90%;display: flex;justify-content: space-around;margin-top: 10%">
								<div
									:class="['bottom_right_img_text']">
									{{
                    emUziData.list[1].name ? emUziData.list[1].name : ''
                  }}
								</div>
								<div class="bottom_right_img_num">{{
                    emUziData.list[1].warehouse ? emUziData.list[1].warehouse : '0'
                  }}
								</div>
							</div>
							<div :style="{backgroundImage:'url('+bg4+')',backgroundRepeat:'no-repeat',
        backgroundSize:'100% 100%',}"
								style="height: 19%;width: 90%;display: flex;justify-content: space-around;margin-top: 10%">
								<div
									:class="['bottom_right_img_text']">
									{{
                    emUziData.list[2].name ? emUziData.list[2].name : ''
                  }}
								</div>
								<div class="bottom_right_img_num">{{
                    emUziData.list[2].warehouse ? emUziData.list[2].warehouse : '0'
                  }}
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

</template>
<script>
	import * as echarts from 'echarts';
	import AMapLoader from '@amap/amap-jsapi-loader'

	window._AMapSecurityConfig = {
		securityJsCode: 'f90cf828d184d682209b30d7a1ea080e' //填写你的安全密钥
	}
	export default {
		data() {
			return {
				basicData: {},
				bg: '/images/moban_bg_290.png',
				bg1: '/images/moban_bg_380.png',
				bg2: '/images/zhenggailv.png',
				bg3: '/images/quantity.png',
				bg4: '/images/quantity_rigt.png',
				map: null,
				mainArr: [],
				mainArrname: [],
				mainArrnum1: [],
				mainArrnum2: [],
				mainArrnum3: [],
				mainArryinhuan_0: [],
				yinhuan: {},
				basedata: {},
				tagbarkeys: [],
				tagbarin: [],
				tagbarout: [],
				weekday: '',
				timer: '',
				nowDate: null, //存放年月日变量
				nowTime: null, //存放时分秒变量,
				weather: '',
				mapList: [],
				safeDataBar: [],
				safeDataLinemei: [],
				safeDataLinekq: [],
				safeDataLineal: [],
				safeDataBottom: [],
				emUziData: {
					list: [{ goods: { name: '' } }, { goods: { name: '' } }, { goods: { name: '' } }]
				}
			}
		},
		created() {
			this.timer = setInterval(this.getTime, 1000)
		},
		mounted() {
			this.getMapData()
			this.getmain() //获取各社区基础数据
			this.getbasedata() //获取基础数据
			this.gettagbar() //获取企业分类
			this.getyinhuan() //隐患排查
			this.getSafeData()
			this.getTime()
			this.getbasicData()
			this.getEmuzi()
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval((this.timer))
			}
		},
		methods: {
			getEmuzi() {
				axios.get('/admin/daping/daping_warehouse').then(res => {
					this.emUziData = res.data.data
				}).catch(function(err) {
					console.log(err)
				})
			},
			getSafeData() {
				axios.get('/admin/daping/daping_jujia').then(res => {
					var safeData = res.data.data
					this.safeDataBar[0] = safeData.putong
					this.safeDataBar[1] = safeData.gugua
					this.safeDataBar[2] = safeData.duju
					this.safeDataLinemei[0] = safeData.putong_mei
					this.safeDataLinemei[1] = safeData.gugua_mei
					this.safeDataLinemei[2] = safeData.duju_mei
					this.safeDataLinekq[0] = safeData.putong_kongqi
					this.safeDataLinekq[1] = safeData.gugua_kongqi
					this.safeDataLinekq[2] = safeData.duju_kongqi
					this.safeDataLineal[0] = safeData.putong_alarm
					this.safeDataLineal[1] = safeData.gugua_alarm
					this.safeDataLineal[2] = safeData.duju_alarm
					this.safeDataBottom[0] = safeData.mei_all
					this.safeDataBottom[1] = safeData.kongqi_all
					this.safeDataBottom[2] = safeData.alarm_all
					this.homesafe()
				}).catch(function(err) {
					console.log(err)
				})
			},
			getMapData() {
				axios.get('/admin/daping/daping_company').then(res => {
					this.mapList = res.data.data
					this.initAMap() //地图
				}).catch(function(err) {
					console.log(err)
				})
			},
			getbasicData() {
				axios.get('/admin/daping/daping_demand').then(res => {
					this.basicData = res.data.data
				}).catch(function(err) {
					console.log(err)
				})
			},

			getTime() {
				let days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
				let today = new Date();
				let weekday = today.getDay();
				this.weekday = days[weekday]

				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				this.month = check(month);
				this.day = check(day);
				this.hour = check(hour);
				this.minute = check(minute);
				this.second = check(second);

				function check(i) {
					const num = (i < 10) ? ("0" + i) : i;
					return num;
				}

				this.nowDate = year + "." + this.month + "." + this.day;
				this.nowTime = this.hour + ":" + this.minute;
			},
			//高德地图
			initAMap() {
				AMapLoader.load({
					key: "b1af1262f4b311a9b9427df8e95238ac", // 申请好的Web端开发者Key，首次调用 load 时必填
					mapStyle: 'amap://styles/darkblue',
					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
						'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow',
						'AMap.MapType'
					], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					// 获取到作为地图容器的DOM元素，创建地图实例
					this.map = new AMap.Map("amapcontainer", { //设置地图容器id
						resizeEnable: true,
						viewMode: "3D", // 使用3D视图
						zoomEnable: true, // 地图是否可缩放，默认值为true
						dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
						doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
						zoom: 11, //初始化地图级别
						center: [120.2, 36.04], // 初始化中心点坐标 青岛
						// mapStyle: "amap://styles/darkblue", // 设置颜色底层
					})
					this.map.addControl(new AMap.MapType({
						defaultType: 1,
						showRoad: false
					}))
					this.setMapMarker()
				}).catch(e => {
					console.log(e)
				})
			},
			setMapMarker() {
				// 创建 AMap.Icon 实例
				let icon = new AMap.Icon({
					size: new AMap.Size(25, 25), // 图标尺寸
					// image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // Icon的图像
					image: '/images/admin/map/com_green.png', // Icon的图像
					imageSize: new AMap.Size(25, 25), // 根据所设置的大小拉伸或压缩图片
					imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
				});
				let makerList = []
				this.mapList.forEach((item) => {
					if (item.enterprise == 1 && item.has_danger == 0) {
						icon._opts.image = '/images/admin/map/com_green.png'
					} else if (item.enterprise == 1 && item.has_danger == 1) {
						icon._opts.image = '/images/admin/map/com_red.gif'
					} else if (item.enterprise == 1 && item.has_danger == 2) {
						icon._opts.image = '/images/admin/map/com_black.gif'
					} else if (item.enterprise == 2 && item.has_danger == 0) {
						icon._opts.image = '/images/admin/map/nine_green.png'
					} else if (item.enterprise == 2 && item.has_danger == 1) {
						icon._opts.image = '/images/admin/map/nine_red.gif'
					} else if (item.enterprise == 2 && item.has_danger == 2) {
						icon._opts.image = '/images/admin/map/nine_black.gif'
					} else if (item.enterprise == 3 && item.has_danger == 0) {
						icon._opts.image = '/images/admin/map/resident_green.png'
					} else if (item.enterprise == 3 && item.has_danger == 1) {
						icon._opts.image = '/images/admin/map/resident_red.gif'
					} else if (item.enterprise == 3 && item.has_danger == 2) {
						icon._opts.image = '/images/admin/map/resident_black.gif'
					}
					// 遍历生成多个标记点
					let marker = new AMap.Marker({
						map: this.map,
						zIndex: 9999999,
						icon: icon, // 添加 Icon 实例
						offset: new AMap.Pixel(-13, -30), //icon中心点的偏移量
						position: [item.lng, item
							.lat] // 经纬度对象new AMap.LngLat(x, y)，也可以是经纬度构成的一维数组[116.39, 39.9]
					});
					makerList.push(marker)
				});
				this.map.add(makerList)
				// 自动适应显示想显示的范围区域
				this.map.setFitView();
			},
			// 基础数据
			getbasedata() {
				axios.get('/admin/daping/daping_base').then(res => {
					this.basedata = res.data.data
				}).catch(function(err) {
					console.log(err)
				})
			},
			//企业分类
			gettagbar() {
				axios.get('/admin/daping/daping_tag').then(res => {
					var tagbardata = res.data.data
					this.tagbarkeys = Object.keys(tagbardata.in)
					this.tagbarin = Object.values(tagbardata.in)
					this.tagbarout = Object.values(tagbardata.out)
					this.EnterpriseClassification()
				}).catch(function(err) {
					console.log(err)
				})
			},
			//隐患排查
			getyinhuan() {
				axios.get('/admin/daping/daping_yinhuan').then(res => {
					this.yinhuan = res.data.data
				}).catch(function(err) {
					console.log(err)
				})
			},
			//获取各社区基础数据
			getmain() {
				axios.get('/admin/daping/daping_community').then(res => {
					var arr = []
					for (var i in res.data.data) {
						arr.push(res.data.data[i])
					}
					this.mainArr = arr
					for (var j = 0; j < this.mainArr.length; j++) {
						this.mainArrname.push(this.mainArr[j].name)
						this.mainArrnum1.push(this.mainArr[j].num1)
						this.mainArrnum2.push(this.mainArr[j].num2)
						this.mainArrnum3.push(this.mainArr[j].num3)
						this.mainArryinhuan_0.push(this.mainArr[j].yinhuan_0)
					}
					this.add()
				}).catch(function(err) {
					console.log(err)
				})
			},
			//居家安全echart图
			homesafe() {
				var myChart = echarts.init(document.getElementById('homesafe'));
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						x: 'left',
						top: 20,
						left: 60,
						itemWidth: 10,
						itemHeight: 10,
						itemGap: 30,
						textStyle: {
							color: '#fff',
							fontSize: 12,

						}
					},
					grid: {
						left: '3%',
						right: '3%',
						// top:'0%',
						bottom: '3%',
						containLabel: true
					},
					yAxis: {
						type: 'value',
						axisTick: {
							show: true,
							lineStyle: {
								color: 'grey'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'grey'
							}
						},
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							color: 'grey',
							interval: 0,
							// formatter: function (value) {
							//   return value.split('').join('\n')
							// }
						},
						//y轴名称 按接口返回数据来
						data: ['普通居民', '孤寡老人', '独居老人']
					},
					series: [{
							name: '煤取暖户数',
							type: 'line',

							// stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							symbolSize: 0,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 1, 0, 0,
									[
										{ offset: 0, color: '#D0C55A' },
										{ offset: 1, color: '#D0C55A' }
									]
								)
							},
							//x轴数值
							data: this.safeDataLinemei
						},
						{
							name: '空气取暖户数',
							type: 'line',

							// stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							symbolSize: 0,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 1, 0, 0,
									[
										{ offset: 0, color: '#2CC2B7' },
										{ offset: 1, color: '#2CC2B7' }
									]
								)
							},
							//x轴数值
							data: this.safeDataLinekq
						},
						{
							name: '报警器缺失数',
							type: 'line',

							// stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							symbolSize: 0,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 1, 0, 0,
									[
										{ offset: 0, color: '#FFA06C' },
										{ offset: 1, color: '#FFA06C' }
									]
								)
							},
							//x轴数值
							data: this.safeDataLineal
						},
						{
							barGap: 20,
							barWidth: 10,
							name: '',
							type: 'bar',
							stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0, 1, 0, 0,
										[
											{ offset: 0, color: '#1A6BD0' },
											{ offset: 1, color: '#04DCFB' }
										]
									),
									//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
									barBorderRadius: [10, 10, 0, 0]
								},

							},
							data: this.safeDataBar
						},
					]
				}
				myChart.setOption(option)
			},
			// 企业分类柱状图
			EnterpriseClassification() {
				var _this = this
				var myChart = echarts.init(document.getElementById('EnterpriseClassification'));
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					toolbox: {},
					legend: {
						x: 'left',
						left: 19,
						top: 0,
						itemWidth: 10,
						itemHeight: 10,
						itemGap: 250,
						textStyle: {
							color: '#fff',
							fontSize: 10,

						}
					},
					xAxis: [{
						axisLabel: {
							color: 'grey',
							lineHeight: 16,
							interval: 0,
							fontSize: 10,
							formatter: function(params) {
								if (params.length > 6) {
									params = params.slice(0, 6) + ('\n') + params.slice(7)
								}
								return params
							},
						}, //x轴字体样式
						type: 'category',

						data: this.tagbarkeys,
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							// formatter: '{value}'
							formatter: '' //y轴数值为空
						}
					}, ],
					series: [{
							name: '本区注册数',
							type: 'bar',
							barGap: 0.1,
							barWidth: 15,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0, 1, 0, 0,
										[
											{ offset: 0, color: '#00308F' },
											{ offset: 1, color: '#09C9C5' }
										]
									),
									label: {
										show: true,
										position: 'top',
										textStyle: {
											color: '#fff',
											fontSize: 10
										}
									}
								},

							},
							tooltip: {
								valueFormatter: function(value) {
									return value;
								}
							},
							data: this.tagbarin
						},
						{
							name: '外区注册数',
							type: 'bar',
							barGap: 0.1,
							barWidth: 15,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0, 1, 0, 0,
										[
											{ offset: 0, color: '#2E4112' },
											{ offset: 1, color: '#FDEA6E' }
										]
									),
									label: {
										show: true,
										position: 'top',
										textStyle: {
											color: '#fff',
											fontSize: 10
										}
									},
								},

							},
							tooltip: {
								valueFormatter: function(value) {
									return value;
								}
							},
							data: this.tagbarout
						},
					]
				};
				myChart.setOption(option)
			},
			add() {
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						x: 'left',
						left: 60,
						itemWidth: 10,
						itemHeight: 10,
						itemGap: 10,
						textStyle: {
							color: '#fff',
							fontSize: 10,

						},
						formatter: function(name) {
							let data = option.series
							for (var i = 0; i < data.length; i++) {
								let abj = 0
								data[i].data.map(item => {
									abj += item
								})
								if (data[i].name == name) {
									return name + '(' + abj + ')'
								}


							}


						}
					},
					grid: {
						left: '3%',
						right: '3%',
						// top:'0%',
						bottom: '3%',
						containLabel: true
					},
					yAxis: {
						type: 'value',
						axisTick: {
							show: true,
							lineStyle: {
								color: 'grey'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'grey'
							}
						},

					},
					xAxis: {
						type: 'category',
						axisLine: {
							show: true,
							lineStyle: {
								color: 'grey'
							}
						},
						axisLabel: {
							fontSize: 10,
							color: '#ddd',
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
						},
						//y轴名称 按接口返回数据来
						data: this.mainArrname
					},
					series: [{
							name: '企业数量',
							type: 'bar',
							stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 1, 0, 0,
									[
										{ offset: 0, color: '#1B63CC' },
										{ offset: 1, color: '#03DFFC' }
									]
								)
							},
							barGap: 20,
							//x轴数值
							data: this.mainArrnum1
						},
						{
							barGap: 20,
							name: '九小场所数量',
							type: 'bar',
							stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 1, 0, 0,
									[
										{ offset: 0, color: '#05A998' },
										{ offset: 1, color: '#63FBFC' }
									]
								)
							},
							data: this.mainArrnum2
						},
						{
							barGap: 20,
							name: '住户数量',
							type: 'bar',
							stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 1, 0, 0,
									[
										{ offset: 0, color: '#2D5CBD' },
										{ offset: 1, color: '#40A0FA' }
									]
								)
							},
							data: this.mainArrnum3
						},
						{
							name: '现存隐患数',
							type: 'line',

							// stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							symbolSize: 0,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 1, 0, 0,
									[
										{ offset: 0, color: 'yellow' },
										{ offset: 1, color: 'yellow' }
									]
								)
							},
							//x轴数值
							data: this.mainArryinhuan_0
						},
					]
				}
				myChart.setOption(option)

			},

		}
	}
</script>
<style>
	* {
		margin: 0;
		padding: 0
	}

	body,
	html {
		height: 100%;
		width: 100%;
		margin: 0 auto;
	}

	.title {
		background: #02004D;
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.title_top {
		color: white;
		font-size: 40px;
		position: absolute;
		top: 2%;
		left: 38.5%;
		font-weight: 900;
	}

	.title_top_data {
		color: #32C5FF;
		position: absolute;
		top: 7%;
		left: 10%;
		font-size: 14px
	}

	.title_top_mon {
		color: #32C5FF;
		position: absolute;
		top: 10.7%;
		left: 19%;
		font-size: 12px
	}

	.title_top_date {
		color: #32C5FF;
		position: absolute;
		top: 7%;
		left: 84%;
		font-size: 14px
	}

	.title_top_tq {
		color: #32C5FF;
		position: absolute;
		top: 10.7%;
		left: 79%;
		font-size: 12px
	}

	.basic_data {
		width: 100%;
		height: 100%;
	}

	.bottom_center_title {
		padding: 1% 0 0 42%;
		font-size: 18px;
		color: #32C5FF;
	}

	.top_left_title {
		padding: 0.5% 0 0 44%;
		font-size: 14px;
		color: #32C5FF;
	}

	.tot_left_data {
		color: #66FFFF;
		font-size: 18px;
		font-weight: 900;
	}

	.tot_left_name {
		font-size: 14px;
		color: #ffffff;
	}

	.top_left_img {
		padding: 3% 0 3% 0;
	}

	.center_left_title {
		padding: 1% 0 0 44%;
		font-size: 14px;
		color: #32C5FF;
	}

	.bottom_left_num {
		color: #66FFFF;
		;
		font-size: 30px;
		margin-top: 10%
	}

	.bottom_left_text {
		margin-top: 4%;
		font-size: 14px;
	}

	.bottom_left_border {
		border: 1px solid #0A1266FF;
		/*background: #0D155DFF;*/
		/*border-radius: 9px;*/
		background: linear-gradient(#065F7CFF, #065F7CFF) top left,
			linear-gradient(#065F7CFF, #065F7CFF) top left,
			linear-gradient(#065F7CFF, #065F7CFF) top right,
			linear-gradient(#065F7CFF, #065F7CFF) top right,
			linear-gradient(#065F7CFF, #065F7CFF) right bottom,
			linear-gradient(#065F7CFF, #065F7CFF) right bottom,
			linear-gradient(#065F7CFF, #065F7CFF) left bottom,
			linear-gradient(#065F7CFF, #065F7CFF) left bottom;
		background-size: 9px 1px, 1px 9px;
		background-repeat: no-repeat;
		opacity: 1;
		z-index: 99999;
	}

	.bottom_left_border_text {
		padding: 10px 15px 0 15px;
		font-size: 14px
	}

	.bottom_left_border_num {
		padding-bottom: 5px;
		padding-left: 15px;
		font-size: 21px;
		color: #0388C8FF
	}

	.bottom_right_text {
		padding-top: 23%;
		font-size: 27px;
		background: linear-gradient(to bottom, #66FFFF 50%, #F7B500 80%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.bottom_right_num {
		display: flex;
		font-size: 12px;
		margin-top: 4%
	}

	.bottom_right_num_text {
		color: #3EAAFF;
		margin-left: 8%
	}

	.bottom_right_img_text {
		width: 80px;
		font-size: 11px;
		scale: 0.9;
		margin-left: -4%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.bottom_right_img_text_long {
		width: 35%;
		font-size: 11px;
		margin-left: -4%;
		margin-top: -1px;
		display: flex;
		align-items: center;
	}

	.bottom_right_img_num {
		color: #66FFFF;
		width: 50px;
		margin-left: 4%;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top_map_left {
		color: white;
		font-size: 12px;
		padding-top: 3%;
		display: flex;
	}

	.homesafe_bottom {
		color: #90B6FF;
		font-size: 12px
	}

	.homesafe_bottom_data {
		font-size: 12px;
	}

	.amap-ctrl-list-layer {
		color: black;
		display: none;
	}
</style>
